732339 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

500ピクセル幅のテンプレート　３



シンプルなテンプレ3

　width="500"（テーブル幅、500ピクセル）のテンプレート
楽天広場での使用では”自動改行無し”で使ってください！！

幅が500ピクセルのテーブルは楽天広場の場合、両サイドにサブ項目を表示させるレイアウトの設定をなさっていらっしゃる方に便利です。
・・・あんまりシンプルじゃないね＾＾；


サンプル3

　タイトル
画像１
　テキストバナー１
　テキストバナー２
　テキストバナー３
　テキストバナー４
画像２
画像３
　テキストバナー５
　テキストバナー６
　テキストバナー７
　テキストバナー８
画像４


コピペ用タグ

<!--テーブル　開始-->
<table width="500" border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3">
<!--タイトルテーブル　開始-->
<table width="100%" border="2" cellpadding="2" cellspacing="4" bordercolor="#669966"> <tr> <td>タイトル</td></tr> </table>
<!--タイトルテーブル　終了-->
</td></tr>
<tr align="center" valign="top"> <td width="120" valign="bottom">
<!--画像テーブル1　開始-->
<TABLE width=120 height=110 style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid"> <TBODY> <TR> <TD valign=middle align=center> 画像１</TD></TR></TBODY></TABLE>
<!--画像テーブル１　終了-->
</td>
<td width="280" align="left" valign="bottom">
<!--テキスト用テーブル（上部）　開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">　テキストバナー１</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー２</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー３</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー４</td></tr> </table>
<!--テキスト用テーブル（上部）　終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル２　開始-->
<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center> 画像２</TD></TR></TBODY></TABLE>
<!--画像テーブル２　終了-->
</td></tr><tr align="center" valign="top"><td width="120" valign="bottom">
<!--画像テーブル３　開始-->
<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center>画像３</TD></TR></TBODY></TABLE>
<!--画像テーブル２　終了-->
</td><td width="280" align="left" valign="bottom">
<!--テキスト用テーブル（下部）　開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">　　テキストバナー５</td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー６</td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー７</td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー８</td></tr> </table>
<!--テキスト用テーブル（下部）　終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル４　開始-->
<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center>画像４ </TD></TR></TBODY></TABLE>
<!--画像テーブル４　終了-->
</td></tr> </table>
<!--テーブル　終了-->


タグ解説
*　<!--〇〇-->のはコメントといってブラウザに表示されない記号です。
　ご自分でわかりやすいようにところどころに目印として使うと便利ですが、使いすぎるとその分文字数が増えますので注意してください。
慣れてきたら省いてしまいましょう。

*　テーブルの色を変える場合はそれぞれのカラーコードを変えればOKです。

⇒　カラーコード一覧

画像の入るタグ
<TABLE width=120 height=110 style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid"> <TBODY> <TR> <TD valign=middle align=center>
画像●</TD></TR></TBODY></TABLE>　
の解説

style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid"
は、
テーブルの
右（right）の線を色が#669966、太さが5px、線種がsolid（実線）
上（top）の線を色が#669966、太さが1px、線種が実線
左（left）の線を色が#669966、太さが1px、線種が実線
下（bottom)の線を色が#999966、太さが5px、線種が実線
と指定してます。



使い方サンプル
注目　ダイエットサプリ　　【αリポ酸ｖｓカルニチン】
話題の3成分コエンザイムQ10・α（アルファ）リポ酸・L‐カルチニンが全て入った最強ダイエット...
αリポ酸100
4,179円 (税込)
L-カルニチン2ヶ月分で3850円　
GAPS アルファリポ酸プラスL-カルニチン
カルニチン2個セット　
L-カルニチン粒　
うわさのリポ酸！α（アルファ）リポ酸 プラチナ
αリポ酸プラチナ
(税込2,079円)

<!--テーブル　開始-->
<table width="500" border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3">
<!--タイトルテーブル　開始-->
<table width="100%" border="2" cellpadding="2" cellspacing="4" bordercolor="#669966"> <tr> <td>タイトル</td></tr> </table>
<!--タイトルテーブル　終了-->
</td></tr>
<tr align="center" valign="top"> <td width="120" valign="bottom">
<!--画像テーブル1　開始-->
<TABLE width=120 height=110 style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid"> <TBODY> <TR> <TD valign=middle align=center> 画像１</TD></TR></TBODY></TABLE>
<!--画像テーブル１　終了-->
</td>
<td width="280" align="left" valign="bottom">
<!--テキスト用テーブル（上部）　開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">　テキストバナー１</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー２</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー３</td></tr>
<tr> <td bordercolor="#999966">　テキストバナー４</td></tr> </table>
<!--テキスト用テーブル（上部）　終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル２　開始-->
<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center> 画像２</TD></TR></TBODY></TABLE>
<!--画像テーブル２　終了-->
</td></tr></table>
<!--テーブル　終了-->


　タイトル
画像１
　テキストバナー１
　テキストバナー２
　テキストバナー３
　テキストバナー４
画像2
画像3
　テキストバナー５
　テキストバナー６
　テキストバナー７
　テキストバナー８
画像4
　
　<table width="500" border="0" cellpadding="2" cellspacing="2"> <tr> <td colspan="3"><table width="100%" border="2" cellpadding="2" cellspacing="4" bordercolor="#663300"> <tr> <td align="center"><strong><font color="#663300">　タイトル</font></strong></td></tr> </table></td></tr> <tr align="center" valign="top"> <td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像１</TD></TR></TBODY></TABLE></td><td width="280" align="left" valign="bottom"><table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#996633"> <tr> <td bordercolor="#996600">　テキストバナー１</td></tr> <tr> <td bordercolor="#996600">　テキストバナー２</td></tr> <tr> <td bordercolor="#996600">　テキストバナー３</td></tr> <tr> <td bordercolor="#99600">　テキストバナー４</td></tr> </table></td><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像2</TD></TR></TBODY></TABLE></td></tr><tr align="center" valign="top"><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像3</TD></TR></TBODY></TABLE></td><td width="280" align="left" valign="bottom"><table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#996600"> <tr> <td bordercolor="#996600">　テキストバナー５</td></tr> <tr> <td bordercolor="#996600">　テキストバナー６</td></tr> <tr> <td bordercolor="#996600">　テキストバナー７</td></tr> <tr> <td bordercolor="#996600">　テキストバナー８</td></tr> </table></td><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像4</TD></TR></TBODY></TABLE></td></tr> </table>
© Rakuten Group, Inc.
X